<script setup>
import { auditBusinessLicenseApi, getBusinessLicenseListApi } from '@/api/job'
import { updateUserStatusApi } from '@/api/user'
import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import Table from '@/components/Job/table.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 表单数据
const formData = ref({
  account: '',
  enterpriseName: '',
  status: ''
})
const formModel = [
  {
    prop: 'account',
    label: '账号',
    type: 'input'
  },
  {
    prop: 'enterpriseName',
    label: '企业名称',
    type: 'input'
  },

  {
    prop: 'status',
    label: '状态',
    type: 'select',
    options: [
      { label: '等待审核', value: 0 },
      { label: '不通过', value: 1 },
      { label: '通过', value: 2 }
    ]
  }
]
const btnOpt = [
  {
    name: '查询',
    btnType: '',
    prop: 'query'
  },
  {
    name: '重置',
    btnType: 'info',
    prop: 'reset'
  }
]

const formRef = ref(null)
const pagizationToatl = ref(null)

/**
 * 获取表格数据
 */
async function getTableData(data) {
  const res = await getBusinessLicenseListApi(data)
  tableData.value = res.data
  pagizationToatl.value = res.total
}
getTableData()
const pagizationRef = ref(null)
const selectFormRef = ref(null)
/**
 * 点击重置按钮
 */
function reset() {
  getTableData()
  pagizationRef.value.reset()
  selectFormRef.value.reset()
}

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'add':
      addForm()
      break
    case 'output':
      exportToExcel()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
    default:
      break
  }
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  queryData.value = data
  const res = await getTableData(data)
  console.log(res)
  showStatusMessage(res)
  tableData.value = res.data
  pagizationToatl.value = res.total
}

// 列表数据
const tableData = ref([])
const columns = [
  {
    prop: 'account',
    label: '账号'
  },
  {
    prop: 'enterpriseName',
    label: '企业名称'
  },
  {
    prop: 'license',
    label: '电子营业执照',
    slot: 'license'
  },
  {
    prop: 'create_time',
    label: '申请时间',
    width: 170
  },
  {
    prop: 'status',
    label: '审核状态',
    slot: 'span'
  }
]
const options = [
  {
    label: '通过',
    type: 'success',
    prop: 'by'
  },
  {
    label: '不通过',
    type: 'danger',
    prop: 'noby'
  }
]

/**
 * 修改账号是否被禁用事件
 * @param data 0|1禁用状态
 */
async function handletTableSwitch(data) {
  console.log(data)
  const res = await updateUserStatusApi({ account: data.account, status: data.status })
  showStatusMessage(res)
}

/**
 * 表格的操作事件
 * @param {Object} data  操作行的数据
 * @param {String} type 操作类型-'edit'-'delete'
 */
function handleTable(data, type) {
  switch (type) {
    // 修改账号是否被禁用
    case 'by':
      handletTableBy(data)
      break
    case 'noby':
      handletTableNoBy(data)
      break
    default:
      break
  }
}
// 分页器条数发生变化
function handleSizeChange(val) {
  const data = selectFormRef.value.getValue()
  console.log('条数发生变化')
  getTableData({ size: val, ...data })
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  console.log('页数发生变化')
  getTableData({ page, size, ...data })
}

// 审核通过
async function handletTableBy(data) {
  console.log(data)

  const res = await auditBusinessLicenseApi({ ...data, result: 2 })
  showStatusMessage(res)
  getTableData()
}
// 审核不通过
async function handletTableNoBy(data) {
  console.log(data)

  const res = await auditBusinessLicenseApi({ ...data, result: 1 })
  showStatusMessage(res)
  getTableData()
}
</script>

<template>
  <div class="license-wrapper">
    <div class="user-content">
      <Form
        :data="formData"
        :formOpt="formModel"
        :btnOpt="btnOpt"
        @handleForm="handleForm"
        ref="selectFormRef"
      ></Form>
      <!-- 表格 -->
      <Table
        :tableData="tableData"
        :columns="columns"
        :options="options"
        @handleTable="handleTable"
      >
        <template #firstColumn>
          <el-table-column type="index" label="用户编号" width="100" align="center" />
        </template>
      </Table>
      <!-- 分页 -->
      <Pagization
        ref="pagizationRef"
        :total="pagizationToatl"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></Pagization>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.license-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  .user-content {
    width: 100%;
    padding: 10px 50px;
    text-align: left;
    overflow: auto;
  }
}
</style>
